{% extends 'layout.html' %}


{% block css %}

    <style>
        .permission-area tr.root {
            background-color: #f1f7fd;;
        }

        .menu-body tr.active {
            background-color: #f1f7fd;
            border-left: 3px solid #fdc00f;
        }


    </style>
{% endblock %}

{% block content %}

    <div style="margin-top: 20px">
        <div class="col-sm-3">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="fa fa-book fa-fw"></i> 菜单管理
                    <a href="{% url 'rbac:menu_add' %}" class="btn btn-sm btn-success pull-right"
                       style="padding: 2px 7px;margin-top: -3px"><i
                            class="fa fa-plus fa-fw"></i>新建</a>
                </div>

                <table class="table ">
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>图标</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody class="menu-body">
                    {% for menu in all_menus %}
                        <tr class="{% if mid  == menu.pk|safe %}active{% endif %}">

                            <td><a href="?mid={{ menu.pk }}">{{ menu.title }}</a></td>
                            <td>
                                <i class="fa {{ menu.icon }} "></i>
                            </td>
                            <td>
                                <a href="{% url 'rbac:menu_edit' menu.pk %}"><i class="fa fa-edit "></i> </a>
                                <a href=""><i class="fa fa-trash-o "></i> </a>
                            </td>
                        </tr>
                    {% endfor %}

                    </tbody>
                </table>

            </div>
        </div>

        <div class="col-sm-9">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="fa fa-cubes fa-fw"></i> 权限管理
                    <a href="" class="btn btn-sm btn-primary pull-right" style="padding: 2px 7px;margin-top: -3px"><i
                            class="fa fa-mail-forward fa-fw"></i>批量操作</a>
                    <a href="" class="btn btn-sm btn-success pull-right" style="padding: 2px 7px;margin-top: -3px"><i
                            class="fa fa-plus fa-fw"></i>新建</a>

                </div>
                <table class="table">
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>URL</th>
                        <th>URL别名</th>
                        <th>菜单</th>
                        <th>所属菜单</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody class="permission-area">
                    {% for pemission in all_permissions %}
                        <tr class="root">
                            <td class="title" id="{{ pemission.id }}"><i
                                    class="fa fa-caret-down"></i> {{ pemission.title }}</td>
                            <td>{{ pemission.url }}</td>
                            <td>{{ pemission.name }}</td>
                            <td> {% if pemission.menu_id %}是{% endif %}  </td>
                            <td>{{ pemission.menu__title|default:'' }}</td>

                            <td>
                                <a href=""><i class="fa fa-edit "></i> </a>
                                <a href=""><i class="fa fa-trash-o "></i> </a>
                            </td>
                        </tr>
                        {% for c_pemission in pemission.children %}
                            <tr pid="{{ pemission.id }}">
                                <td>{{ c_pemission.title }}</td>
                                <td>{{ c_pemission.url }}</td>
                                <td>{{ c_pemission.name }}</td>
                                <td> {% if c_pemission.menu_id %}是{% endif %}  </td>
                                <td>{{ c_pemission.menu__title|default:'' }}</td>

                                <td>
                                    <a href=""><i class="fa fa-edit "></i> </a>
                                    <a href=""><i class="fa fa-trash-o "></i> </a>
                                </td>
                            </tr>


                        {% endfor %}

                    {% endfor %}

                    </tbody>
                </table>

            </div>
        </div>


    </div>

{% endblock %}



{% block js %}

    <script>

        $('.permission-area .root .title').click(function () {
            var id = $(this).attr('id')

            var i = $(this).find('i')

            if (i.hasClass('fa fa-caret-down')) {
                i.attr('class', 'fa fa-caret-right')
            } else {
                i.attr('class', 'fa fa-caret-down')
            }

            $('[pid =' + id + ']').toggleClass('hidden')
        })
    </script>


{% endblock %}